<template>
    <div class="offboarding-management-page">
        <!-- 頁面標題 -->
        <page-title :title="'離職管理'" />

        <!-- Tab 切換 -->
        <div class="tab-section">
            <el-tabs v-model="activeTab" @tab-click="handleTabChange">
                <el-tab-pane label="待離職" name="pending"></el-tab-pane>
                <el-tab-pane label="已離職" name="completed"></el-tab-pane>
                <el-tab-pane label="已放棄" name="abandoned"></el-tab-pane>
            </el-tabs>
        </div>

        <!-- 篩選條件區域 -->
        <div class="filter-section">
            <el-form :model="filterForm" label-width="100px" label-position="right">
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-form-item label="部門">
                            <el-select v-model="filterForm.department" placeholder="請選擇部門" clearable>
                                <el-option v-for="item in departmentOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="職位">
                            <el-select v-model="filterForm.position" placeholder="請選擇職位" clearable>
                                <el-option v-for="item in positionOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="離職類型">
                            <el-select v-model="filterForm.offboardingType" placeholder="請選擇類型" clearable>
                                <el-option v-for="item in offboardingTypeOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="員工類型">
                            <el-select v-model="filterForm.employeeType" placeholder="請選擇類型" clearable>
                                <el-option v-for="item in employeeTypeOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item :label="activeTab === 'abandoned' ? '撤銷離職日期' : '離職日期'">
                            <el-date-picker v-model="filterForm.offboardingDateRange" type="daterange"
                                range-separator="至" start-placeholder="開始日期" end-placeholder="結束日期"
                                value-format="YYYY-MM-DD" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="關鍵字搜索">
                            <el-input v-model="filterForm.keyword" placeholder="請輸入員工姓名/手機號碼/編號" clearable
                                @clear="handleSearch" @keyup.enter="handleSearch">
                                <template #append>
                                    <el-button type="primary" @click="handleSearch">
                                        <el-icon>
                                            <Search />
                                        </el-icon>
                                    </el-button>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <!-- 操作按鈕區域 -->
        <div class="action-section">
            <template v-if="activeTab === 'pending'">
                <el-button type="primary" @click="processOffboarding">
                    <el-icon>
                        <Edit />
                    </el-icon>
                    <span>辦理離職</span>
                </el-button>
                <el-button type="warning" @click="exportOffboarding">
                    <el-icon>
                        <Download />
                    </el-icon>
                    <span>導出</span>
                </el-button>
                <el-button type="info" @click="showMoreActions">
                    <el-icon>
                        <More />
                    </el-icon>
                    <span>更多操作</span>
                </el-button>
            </template>

            <template v-else-if="activeTab === 'completed'">
                <el-button type="warning" @click="exportOffboarding">
                    <el-icon>
                        <Download />
                    </el-icon>
                    <span>導出</span>
                </el-button>
            </template>

            <template v-else-if="activeTab === 'abandoned'">
                <el-button type="warning" @click="exportOffboarding">
                    <el-icon>
                        <Download />
                    </el-icon>
                    <span>導出</span>
                </el-button>
            </template>
        </div>

        <!-- 表格區域 -->
        <div class="table-section">
            <!-- 待離職表格 -->
            <el-table v-if="activeTab === 'pending'" :data="pendingList" style="width: 100%" v-loading="loading"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="name" label="員工姓名" width="120" />
                <el-table-column prop="employeeId" label="員工編號" width="120" />
                <el-table-column prop="department" label="原組織部門" width="150" />
                <el-table-column prop="position" label="職位" width="150" />
                <el-table-column prop="phone" label="手機號碼" width="150" />
                <el-table-column prop="offboardingType" label="離職類型" width="120" />
                <el-table-column prop="applyDate" label="申請日期" width="120" />
                <el-table-column prop="offboardingDate" label="離職日期" width="120" />
                <el-table-column prop="lastWorkDate" label="最後工作日期" width="120" />
                <el-table-column prop="salarySettlementDate" label="薪資結算日期" width="120" />
                <el-table-column prop="reason" label="離職原因" width="150" show-overflow-tooltip />
                <el-table-column prop="reasonDetail" label="離職原因說明" width="180" show-overflow-tooltip />
                <el-table-column prop="approvalStatus" label="離職審批" width="120">
                    <template #default="{ row }">
                        <el-tag :type="getApprovalTagType(row.approvalStatus)">
                            {{ row.approvalStatus }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" fixed="right">
                    <template #default="{ row }">
                        <el-button type="primary" size="small" @click="confirmOffboarding(row)">確認離職</el-button>
                        <el-button type="danger" size="small" @click="abandonOffboarding(row)">放棄離職</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 已離職表格 -->
            <el-table v-else-if="activeTab === 'completed'" :data="completedList" style="width: 100%"
                v-loading="loading" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="name" label="員工姓名" width="120" />
                <el-table-column prop="employeeId" label="員工編號" width="120" />
                <el-table-column prop="department" label="原組織部門" width="150" />
                <el-table-column prop="position" label="職位" width="150" />
                <el-table-column prop="phone" label="手機號碼" width="150" />
                <el-table-column prop="offboardingType" label="離職類型" width="120" />
                <el-table-column prop="applyDate" label="申請日期" width="120" />
                <el-table-column prop="offboardingDate" label="離職日期" width="120" />
                <el-table-column prop="lastWorkDate" label="最後工作日期" width="120" />
                <el-table-column prop="salarySettlementDate" label="薪資結算日期" width="120" />
                <el-table-column prop="reason" label="離職原因" width="150" show-overflow-tooltip />
                <el-table-column prop="reasonDetail" label="離職原因說明" width="180" show-overflow-tooltip />
                <el-table-column prop="status" label="狀態" width="120">
                    <template #default="{ row }">
                        <el-tag type="success">
                            {{ row.status }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120" fixed="right">
                    <template #default="{ row }">
                        <el-button type="danger" size="small" @click="revokeOffboarding(row)">撤銷離職</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 已放棄表格 -->
            <el-table v-else-if="activeTab === 'abandoned'" :data="abandonedList" style="width: 100%"
                v-loading="loading" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="name" label="員工姓名" width="120" />
                <el-table-column prop="employeeId" label="員工編號" width="120" />
                <el-table-column prop="department" label="原組織部門" width="150" />
                <el-table-column prop="position" label="職位" width="150" />
                <el-table-column prop="phone" label="手機號碼" width="150" />
                <el-table-column prop="offboardingType" label="離職類型" width="120" />
                <el-table-column prop="applyDate" label="申請日期" width="120" />
                <el-table-column prop="abandonDate" label="放棄時間" width="180" />
                <el-table-column prop="reason" label="離職原因" width="150" show-overflow-tooltip />
                <el-table-column prop="reasonDetail" label="離職原因說明" width="180" show-overflow-tooltip />
                <el-table-column prop="status" label="狀態" width="120">
                    <template #default="{ row }">
                        <el-tag type="info">
                            {{ row.status }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="80" fixed="right">
                    <template #default="{ row }">
                        <el-button type="danger" size="small" @click="deleteRecord(row.id)">刪除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分頁 -->
            <div class="pagination-section">
                <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
                    :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>

        <!-- 辦理離職對話框 -->
        <el-dialog v-model="offboardingDialogVisible" :title="'辦理離職'" width="700px">
            <el-form :model="offboardingForm" label-width="120px" label-position="right">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="員工姓名" required>
                            <el-input v-model="offboardingForm.name" placeholder="請輸入員工姓名" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="員工編號" required>
                            <el-input v-model="offboardingForm.employeeId" placeholder="員工編號" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="部門" required>
                            <el-input v-model="offboardingForm.department" placeholder="部門" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="職位" required>
                            <el-input v-model="offboardingForm.position" placeholder="職位" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="離職類型" required>
                            <el-select v-model="offboardingForm.offboardingType" placeholder="請選擇離職類型"
                                style="width: 100%">
                                <el-option v-for="item in offboardingTypeOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="離職日期" required>
                            <el-date-picker v-model="offboardingForm.offboardingDate" type="date" placeholder="請選擇日期"
                                style="width: 100%" value-format="YYYY-MM-DD" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="最後工作日期" required>
                            <el-date-picker v-model="offboardingForm.lastWorkDate" type="date" placeholder="請選擇日期"
                                style="width: 100%" value-format="YYYY-MM-DD" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="薪資結算日期" required>
                            <el-date-picker v-model="offboardingForm.salarySettlementDate" type="date"
                                placeholder="請選擇日期" style="width: 100%" value-format="YYYY-MM-DD" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="離職原因" required>
                    <el-select v-model="offboardingForm.reason" placeholder="請選擇離職原因" style="width: 100%">
                        <el-option v-for="item in reasonOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="離職原因說明">
                    <el-input v-model="offboardingForm.reasonDetail" type="textarea" :rows="3"
                        placeholder="請輸入離職原因說明" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="offboardingDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitOffboarding">確定</el-button>
            </template>
        </el-dialog>

        <!-- 更多操作下拉菜單 -->
        <el-dropdown ref="moreActionsDropdown" trigger="click" :hide-on-click="false">
            <div style="display: none;"></div>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="batchConfirmOffboarding">批量確認離職</el-dropdown-item>
                    <el-dropdown-item @click="batchAbandonOffboarding">批量放棄離職</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Search, Edit, Download, More } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// Tab 切換
const activeTab = ref('pending')

// 篩選表單
const filterForm = reactive({
    department: '',
    position: '',
    offboardingType: '',
    employeeType: '',
    offboardingDateRange: [],
    keyword: ''
})

// 下拉選項
const departmentOptions = [
    { value: 'rd', label: '研發部' },
    { value: 'hr', label: '人事部' },
    { value: 'finance', label: '財務部' },
    { value: 'marketing', label: '市場部' },
    { value: 'sales', label: '銷售部' }
]

const positionOptions = [
    { value: 'frontend', label: '前端開發' },
    { value: 'backend', label: '後端開發' },
    { value: 'designer', label: '設計師' },
    { value: 'product', label: '產品經理' },
    { value: 'hr', label: '人事專員' }
]

const offboardingTypeOptions = [
    { value: 'resignation', label: '主動離職' },
    { value: 'termination', label: '公司解僱' },
    { value: 'retirement', label: '退休' },
    { value: 'contract_end', label: '合同到期' },
    { value: 'other', label: '其他' }
]

const employeeTypeOptions = [
    { value: 'fulltime', label: '全職' },
    { value: 'parttime', label: '兼職' },
    { value: 'intern', label: '實習生' },
    { value: 'contract', label: '合同工' }
]

const reasonOptions = [
    { value: 'personal', label: '個人原因' },
    { value: 'career', label: '職業發展' },
    { value: 'salary', label: '薪資問題' },
    { value: 'environment', label: '工作環境' },
    { value: 'health', label: '健康原因' },
    { value: 'family', label: '家庭原因' },
    { value: 'other', label: '其他' }
]

// 表格數據
const loading = ref(false)
const pendingList = ref([
    {
        id: 1,
        name: '張三',
        employeeId: '10001',
        department: '研發部',
        position: '前端開發',
        phone: '13800138001',
        offboardingType: '主動離職',
        applyDate: '2023-06-10',
        offboardingDate: '2023-06-30',
        lastWorkDate: '2023-06-29',
        salarySettlementDate: '2023-07-05',
        reason: '個人原因',
        reasonDetail: '個人職業規劃調整',
        approvalStatus: '待審批'
    },
    {
        id: 2,
        name: '李四',
        employeeId: '10002',
        department: '人事部',
        position: '人事專員',
        phone: '13800138002',
        offboardingType: '公司解僱',
        applyDate: '2023-06-12',
        offboardingDate: '2023-06-30',
        lastWorkDate: '2023-06-15',
        salarySettlementDate: '2023-06-30',
        reason: '績效不達標',
        reasonDetail: '連續三個季度績效評級為C',
        approvalStatus: '已通過'
    }
])

const completedList = ref([
    {
        id: 3,
        name: '王五',
        employeeId: '10003',
        department: '市場部',
        position: '市場專員',
        phone: '13800138003',
        offboardingType: '主動離職',
        applyDate: '2023-05-15',
        offboardingDate: '2023-05-31',
        lastWorkDate: '2023-05-30',
        salarySettlementDate: '2023-06-05',
        reason: '職業發展',
        reasonDetail: '獲得更好的職業發展機會',
        status: '已離職'
    }
])

const abandonedList = ref([
    {
        id: 4,
        name: '趙六',
        employeeId: '10004',
        department: '財務部',
        position: '會計',
        phone: '13800138004',
        offboardingType: '主動離職',
        applyDate: '2023-06-05',
        abandonDate: '2023-06-08 14:30',
        reason: '薪資問題',
        reasonDetail: '經溝通後薪資調整，決定留下',
        status: '已放棄'
    }
])

// 分頁
const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 10
})

// 多選
const selectedRecords = ref([])

// 辦理離職對話框
const offboardingDialogVisible = ref(false)
const offboardingForm = reactive({
    name: '',
    employeeId: '',
    department: '',
    position: '',
    offboardingType: '',
    offboardingDate: '',
    lastWorkDate: '',
    salarySettlementDate: '',
    reason: '',
    reasonDetail: ''
})

// 更多操作下拉菜單
const moreActionsDropdown = ref(null)

// 方法
const handleTabChange = () => {
    selectedRecords.value = []
    handleSearch()
}

const handleSearch = () => {
    loading.value = true
    // 模擬API請求
    setTimeout(() => {
        loading.value = false
    }, 500)
}

const processOffboarding = () => {
    if (selectedRecords.value.length === 0) {
        ElMessage.warning('請至少選擇一條記錄')
        return
    }

    if (selectedRecords.value.length > 1) {
        ElMessage.warning('請選擇單條記錄進行辦理')
        return
    }

    const record = selectedRecords.value[0]
    Object.assign(offboardingForm, {
        name: record.name,
        employeeId: record.employeeId,
        department: record.department,
        position: record.position,
        offboardingType: record.offboardingType || '',
        offboardingDate: record.offboardingDate || '',
        lastWorkDate: record.lastWorkDate || '',
        salarySettlementDate: record.salarySettlementDate || '',
        reason: record.reason || '',
        reasonDetail: record.reasonDetail || ''
    })

    offboardingDialogVisible.value = true
}

const submitOffboarding = () => {
    // 驗證表單
    if (!offboardingForm.offboardingType || !offboardingForm.offboardingDate ||
        !offboardingForm.lastWorkDate || !offboardingForm.salarySettlementDate ||
        !offboardingForm.reason) {
        ElMessage.warning('請填寫完整信息')
        return
    }

    // 更新待離職列表中的記錄
    const record = selectedRecords.value[0]
    const index = pendingList.value.findIndex(item => item.id === record.id)
    if (index !== -1) {
        Object.assign(pendingList.value[index], {
            offboardingType: offboardingForm.offboardingType,
            offboardingDate: offboardingForm.offboardingDate,
            lastWorkDate: offboardingForm.lastWorkDate,
            salarySettlementDate: offboardingForm.salarySettlementDate,
            reason: offboardingForm.reason,
            reasonDetail: offboardingForm.reasonDetail,
            approvalStatus: '已通過'
        })
    }

    ElMessage.success('辦理離職成功')
    offboardingDialogVisible.value = false
}

const confirmOffboarding = (record) => {
    ElMessageBox.confirm(
        '確定該員工已離職嗎？此操作不可逆轉。',
        '提示',
        {
            confirmButtonText: '確定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        // 從待離職列表移除
        pendingList.value = pendingList.value.filter(item => item.id !== record.id)

        // 添加到已離職列表
        const offboardedEmployee = {
            ...record,
            status: '已離職'
        }
        completedList.value.unshift(offboardedEmployee)

        ElMessage.success('已確認離職')
    }).catch(() => {
        ElMessage.info('已取消操作')
    })
}

const abandonOffboarding = (record) => {
    ElMessageBox.prompt('請輸入放棄原因', '放棄離職', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        inputPlaceholder: '請輸入放棄原因',
        inputValidator: (value) => {
            if (!value) {
                return '放棄原因不能為空'
            }
            return true
        }
    }).then(({ value }) => {
        // 從待離職列表移除
        pendingList.value = pendingList.value.filter(item => item.id !== record.id)

        // 添加到已放棄列表
        const abandonedRecord = {
            ...record,
            abandonDate: new Date().toLocaleString(),
            reason: value,
            status: '已放棄'
        }
        abandonedList.value.unshift(abandonedRecord)

        ElMessage.success('已放棄離職')
    }).catch(() => {
        ElMessage.info('已取消操作')
    })
}

const revokeOffboarding = (record) => {
    ElMessageBox.confirm(
        '確定要撤銷該員工的離職狀態嗎？',
        '提示',
        {
            confirmButtonText: '確定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        // 從已離職列表移除
        completedList.value = completedList.value.filter(item => item.id !== record.id)

        // 添加回員工管理系統（此處僅為示例，實際應根據業務邏輯處理）
        ElMessage.success('已撤銷離職狀態')
    }).catch(() => {
        ElMessage.info('已取消操作')
    })
}

const exportOffboarding = () => {
    ElMessage.info('導出功能待實現')
}

const showMoreActions = () => {
    moreActionsDropdown.value.handleClick()
}

const deleteRecord = (id) => {
    ElMessageBox.confirm(
        '確定要刪除這條記錄嗎？',
        '提示',
        {
            confirmButtonText: '確定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        abandonedList.value = abandonedList.value.filter(item => item.id !== id)
        ElMessage.success('刪除成功')
    }).catch(() => {
        ElMessage.info('已取消刪除')
    })
}

const batchConfirmOffboarding = () => {
    if (selectedRecords.value.length === 0) {
        ElMessage.warning('請至少選擇一條記錄')
        return
    }

    ElMessageBox.confirm(
        `確定要批量確認 ${selectedRecords.value.length} 條離職記錄嗎？`,
        '提示',
        {
            confirmButtonText: '確定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        const ids = selectedRecords.value.map(item => item.id)
        const toBeMoved = pendingList.value.filter(item => ids.includes(item.id))

        // 添加到已離職列表
        toBeMoved.forEach(record => {
            const offboardedEmployee = {
                ...record,
                status: '已離職'
            }
            completedList.value.unshift(offboardedEmployee)
        })

        // 從待離職列表移除
        pendingList.value = pendingList.value.filter(item => !ids.includes(item.id))

        ElMessage.success(`已成功確認 ${toBeMoved.length} 條離職記錄`)
        selectedRecords.value = []
    }).catch(() => {
        ElMessage.info('已取消批量確認')
    })
}

const batchAbandonOffboarding = () => {
    if (selectedRecords.value.length === 0) {
        ElMessage.warning('請至少選擇一條記錄')
        return
    }

    ElMessageBox.prompt('請輸入放棄原因', '批量放棄離職', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        inputPlaceholder: '請輸入放棄原因',
        inputValidator: (value) => {
            if (!value) {
                return '放棄原因不能為空'
            }
            return true
        }
    }).then(({ value }) => {
        const ids = selectedRecords.value.map(item => item.id)
        const toBeMoved = pendingList.value.filter(item => ids.includes(item.id))

        // 添加到已放棄列表
        toBeMoved.forEach(record => {
            const abandonedRecord = {
                ...record,
                abandonDate: new Date().toLocaleString(),
                reason: value,
                status: '已放棄'
            }
            abandonedList.value.unshift(abandonedRecord)
        })

        // 從待離職列表移除
        pendingList.value = pendingList.value.filter(item => !ids.includes(item.id))

        ElMessage.success(`已成功放棄 ${toBeMoved.length} 條離職記錄`)
        selectedRecords.value = []
    }).catch(() => {
        ElMessage.info('已取消批量操作')
    })
}

const handleSelectionChange = (selection) => {
    selectedRecords.value = selection
}

const handleSizeChange = (val) => {
    pagination.pageSize = val
    handleSearch()
}

const handleCurrentChange = (val) => {
    pagination.currentPage = val
    handleSearch()
}

const getApprovalTagType = (status) => {
    switch (status) {
        case '已通過': return 'success'
        case '審批中': return 'warning'
        case '未通過': return 'danger'
        default: return 'info'
    }
}
</script>

<style lang="less" scoped>
.offboarding-management-page {
    padding: 20px;
    background-color: #fff;

    .tab-section {
        margin-bottom: 16px;

        :deep(.el-tabs__header) {
            margin-bottom: 0;
        }
    }

    .filter-section {
        padding: 16px;
        margin-bottom: 16px;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    }

    .action-section {
        margin-bottom: 16px;
        display: flex;
        gap: 12px;
    }

    .table-section {
        background-color: #fff;
        padding: 16px;
        border-radius: 4px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);

        .pagination-section {
            margin-top: 16px;
            display: flex;
            justify-content: flex-end;
        }
    }
}
</style>